<template>
	<view class="tabbar-container">
		<view class="tabbar-item" v-for="(item, index) in tabbarList" @click="changeItem(item)"
			:class="[item.centerItem ? ' center-item' : '']">
			<view class="item-top">
				<view class="message_num" v-if="item.id==3&&num>0">{{num}}</view>
				<image :src="currentItem == item.id ? item.selectIcon : item.icon" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentItem: 0,
				num: 0,
				tabbarList: [{
						id: 0,
						path: '/pages/index/index',
						// icon: "/static/xin.png",
						// selectIcon: "/static/xin1.png",
						icon: "/static/svg/tab1.svg",
						selectIcon: "/static/svg/tab1-1.svg",
					},
					{
						id: 1,
						path: '/pages/square/square',
						// icon: "/static/square.png",
						// selectIcon: "/static/square1.png",
						icon: "/static/svg/tab2.svg",
						selectIcon: "/static/svg/tab2-1.svg",
					},
					{
						id: 2,
						path: '/pages/workbench/workbench',
						icon: "/static/tab-workbench1.png",
						selectIcon: "/static/tab-workbench.png",
						// icon: "/static/svg/tab3.svg",
						// selectIcon: "/static/svg/tab3-1.svg",
						centerItem: true
					},
					{
						id: 3,
						path: '/pages/message/message',
						// icon: "/static/message.png",
						// selectIcon: "/static/message1.png",
						icon: "/static/svg/tab4.svg",
						selectIcon: "/static/svg/tab4-1.svg",
					},
					{
						id: 4,
						path: '/pages/my/my',
						// icon: "/static/my.png",
						// selectIcon: "/static/my1.png",
						icon: "/static/svg/tab5.svg",
						selectIcon: "/static/svg/tab5-1.svg",
					}
				]
			};
		},
		mounted() {
			this.currentItem = this.currentPage;
			// 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
			if (process.env.VUE_APP_PLATFORM != 'mp-weixin') {
				uni.hideTabBar()
			}
			uni.$on('message_num', num => {
				this.num = num||getApp().globalData.imMessageNum
			})			
			this.num = getApp().globalData.imMessageNum
		},
		methods: {
			changeItem(item) {
				if (item.id == 2) {
					var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
					if (!userInfo || !userInfo.group_id || userInfo.group_id < 1) {
						// uni.navigateTo({
						// 	url: "/subpages/settled/settled"
						// });
						return;
					}
					
					if(userInfo.group_id == 1){
						uni.navigateTo({
							url:'/subpages/settled/settled'
						})
						return
					}
				}
				console.log(item, "item")
				uni.switchTab({
					url: item.path
				});
			}
		}
	}
</script>

<style lang="scss">
	view {
		// padding: 0;
		// margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		z-index: 9;
		bottom: 12rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5rpx 0;
		height: 50px;
		border-radius: 33px;
		opacity: 1;
		background: #2D2E4C;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.102);
	}

	.tabbar-container .tabbar-item {
		width: 20%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
		position: relative;
	}

	.message_num {
		position: absolute;
		top: 0;
		right: 0;
		/* height: 28rpx; */
		line-height: 26rpx;
		padding: 2rpx 8rpx;
		background: #FA747F;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15rpx;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 20px;
		height: 50rpx;
	}

	.tabbar-container .center-item .item-top {
		width: fit-content;
		height: fit-content;
		padding: 10rpx;
	}

	.tabbar-container .center-item .item-top image {
		width: 60px;
		height: 30px;
	}
</style>